<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Move</title>
    <style>
         .box {
            width: 100px;
            height: 100px;
            background-color: red;
            position: fixed;
            border-radius: 50px;
        }
        .bex {
            width: 100px;
            height: 100px;
            background-color: blue;
            position: fixed;
            top: 110px;
            border-radius: 50px;
        }
        .bax {
            width: 100px;
            height: 100px;
            background-color: purple;
            position: fixed;
            top: 220px;
            border-radius: 50px;
        }
    </style> 
</head>
    <body>
        <div class="box"></div>
        <div class="bex"></div>
        <div class="bax"></div>
    <script>
        //第一种方法实现
        function abc(boxID,time){
            setTimeout(() => {
                    var box = document.querySelector(boxID);        
                    var intervalID = null, begin = 0;
                    clearInterval(intervalID);
                    intervalID = setInterval(function () {
                        begin += 5;
                        if (begin >= 500){
                            begin = 500;
                            clearInterval(intervalID);
                        }
                        box.style.marginLeft = begin + 'px';
                    }, 1000/60);    
                },time);
        }
        abc('.box');
        abc('.bex',1600);
        abc('.bax',3200); 


        //第二种
        /* let box = document.querySelector('.box');
        let bex = document.querySelector('.bex');
        let bax = document.querySelector('.bax'); 
        let p = new Promise((resolve, reject) => {
            setTimeout(() => {
                var intervalID = null;
                clearInterval(intervalID);
                let left = box.offsetLeft;
                intervalID = setInterval(function () {
                    left += 5;
                    if (left >= 500){
                        left = 500;
                        clearInterval(intervalID);
                    }
                box.style.left = left + 'px';
        }, 1000/60);
            resolve("好耶");
            });
        })
        .then((data) => {
            setTimeout(() => {
                var intervalID = null;
                clearInterval(intervalID);
                let left = bex.offsetLeft;
                intervalID = setInterval(function () {
                    left += 5;
                    if (left >= 500){
                        left = 500;
                        clearInterval(intervalID);
                    }
                bex.style.left = left + 'px';
        }, 1000/60);
            },1600);
            return data;
        })
        .then((data) => {
            setTimeout(() => {
                var intervalID = null;
                clearInterval(intervalID);
                let left = bax.offsetLeft;
                intervalID = setInterval(function () {
                    left += 5;
                    if (left >= 500){
                        left = 500;
                        clearInterval(intervalID);
                    }
                bax.style.left = left + 'px';
        }, 1000/60);
            },3200);
        })
        .catch((error) => {
            console.log(data);
        }); */ 


        //第三种方法
        /* let step = (time,boxID) => {
            return new Promise((resolve) => {
                setTimeout(() => {
                    var box = document.querySelector(boxID);        
                    var intervalID = null, begin = 0;
                    clearInterval(intervalID);
                    intervalID = setInterval(function () {
                        begin += 5;
                        if (begin >= 500){
                            begin = 500;
                            clearInterval(intervalID);
                        }
                        box.style.marginLeft = begin + 'px';
                    }, 1000/60);    
                },time);
 
            });
        };
        async function demo() {
            let word1 = await step(1,'.box');
        }
        demo();
        async function demo1() {
            let word2 = await step(1600,'.bex');
        }
        demo1();
        async function demo2() {
            let word3 = await step(3200,'.bax');
        }
        demo2(); */ 
    </script>  
    </body>
</html>